<template>
    <div name="answer-view"
         :style="{position: 'relative',width:width+'px', boxShadow:' 0 0 7px 2px rgba(226, 235, 248, 1)'}"
         class="answer-view">
        <slot name="header">
            <div class="stroke-bottom-area" :style="{top:0,left:0,width:width+'px'}">
                <span style="color:rgba(49, 151, 255, 1);font-size: 20px;">{{student.name}}</span>
                <div class="page-operate-area" v-if="pages.length>0">
                    <div @click="PreviouPage" class="page-operate-bottom el-icon-caret-left"></div>
                    <div>{{(currentPage+1) + '/' + pages.length}}</div>
                    <div @click="NextPage" class="page-operate-bottom el-icon-caret-right"></div>
                </div>
            </div>
        </slot>
        <div class="stroke-canvas-area" :style="`height:${height}px;width:${width}}px;`">
            <canvas :id="comIndex + page.id" :style="page.backGround" :width="width" v-for="(page,index) in pagesInfo"
                    :height="height" v-show="index === currentPage">
            </canvas>
        </div>
        <slot name="footer">
            <div class="stroke-bottom-area"
                 :style="{bottom:0,left:0,width:width+'px',fontSize: isBig? '20px' : '16px'}">
                <div class="el-icon-zoom-in stroke-bottom" @click="showStroke" v-if="isBig"><span
                        style="font-size:16px;">&nbsp&nbsp缩小图片</span>
                </div>
                <div class="el-icon-zoom-in stroke-bottom" @click="showStroke" v-else><span
                        style="font-size:16px;">&nbsp&nbsp放大图片</span>
                </div>
                <div class="iconfont icon-huifang stroke-bottom" @click="showVideo"><span>&nbsp&nbsp查看回放</span>
                </div>
                <!--<el-dialog-->
                <!--title="学生做答"-->
                <!--:visible.sync="viewFullscreen"-->
                <!--:append-to-body="true"-->
                <!--:center="true"-->
                <!--:width="width*2+100+''"-->
                <!--@close="close('dialog')"-->
                <!--&gt;-->
                <!--<div slot="title" style="color:rgba(102, 102, 102, 1);">学生做答</div>-->
                <!--<div class="inside-stroke-view">-->
                <!--<div class='el-icon-arrow-left inside-stroke-view-arrow' @click="changeStuIndex(1)"></div>-->
                <!--<hc-answer-view v-if="viewFullscreen" :student="student" @inside-stroke-close="close"-->
                <!--:stroke-data="strokeData" :com-index="1" :title="student.name" :imgs="imgs"-->
                <!--:pages="pages" :width="width*2" :height="height*2"></hc-answer-view>-->
                <!--<div class='el-icon-arrow-right inside-stroke-view-arrow' @click="changeStuIndex(2)"></div>-->
                <!--</div>-->
                <!--</el-dialog>-->
                <!--<el-dialog-->
                <!--:title="student.name"-->
                <!--:append-to-body="true"-->
                <!--:visible.sync="videoVisible"-->
                <!--:width="width*2/(this.comIndex+1)+100+''"-->
                <!--top="5vh"-->
                <!--&gt;-->
                <!--<div slot="title">-->
                <!--<span style="color:rgba(49, 151, 255, 1);font-size: 24px;">{{student.name}}</span>-->
                <!--</div>-->
                <!--<div class="inside-stroke-view">-->
                <!--<div class='el-icon-arrow-left inside-stroke-view-arrow' @click="changeStuIndex(1)"></div>-->
                <!--<div class="inside-stroke-view">-->
                <!--<hc-video-component v-if="videoVisible" :raw-data="strokeData" :member-id="student.memberId"-->
                <!--:imgs="imgs"-->
                <!--:pages="pages" :width="width*2/(this.comIndex+1)"-->
                <!--:height="297/210*width*2/(this.comIndex+1)"></hc-video-component>-->
                <!--</div>-->
                <!--<div class='el-icon-arrow-right inside-stroke-view-arrow' @click="changeStuIndex(2)"></div>-->
                <!--</div>-->
                <!--</el-dialog>-->
            </div>
        </slot>
    </div>
</template>
<script>

  import {Utils} from '../utils/Utils';
  import HcAnswerView from './answerView';
  import HcVideoComponent from './VideoComponent';
  import uuid from 'uuid';

  export default {
    name: 'hcAnswerView',
    components: {HcAnswerView, HcVideoComponent},
    data() {
      return {
        pagesInfo: [],
        // isBig: false,
        viewFullscreen: false,
        videoVisible: false,
        currentPage: 0,
        InitStrokeData: '',
        InitStudent: '',
        closeType: ''
      };
    },
    watch: {
      strokeData() {
        if (this.comIndex !== 1) {
          this.InitStrokeData = this.strokeData;
          this.InitStudent = this.student;
        }
        this.doStroke(this.width, this.height);
      }
    },
    computed: {
      moreWidth: function() {
        return this.width * 2;
      },
      moreHeight: function() {
        return this.height * 2;
      }
    },
    methods: {
      // changeStuIndex(type) {
      //   switch (type) {
      //     case 1:
      //       this.$emit('previous');
      //       break;
      //     case 2:
      //       this.$emit('next');
      //       break;
      //   }
      // },
      // close(place, type) {
      //   this.viewFullscreen = false;
      //   if (type) {
      //     if (place === 'stroke') {
      //       this.closeType = type;
      //     }
      //   } else {
      //     if (this.closeType !== 'big') {
      //       this.$emit('close');
      //     }
      //     this.closeType = 'all';
      //
      //   }
      // },
      // closeBig() {
      //   this.$emit('inside-stroke-close', 'stroke', 'big');
      // },
      showStroke() {
        this.$emit('change-size');
        // this.viewFullscreen = true;
      },
      showVideo() {
        this.$emit('show-video');
        // this.videoVisible = true;
      },
      PreviouPage() {
        // console.log(this.currentPage, this.pages.length);
        if (this.currentPage === 0) return;
        this.currentPage--;
        // this.changePage();
      },
      NextPage() {
        // console.log(this.currentPage, this.pages.length);
        if (this.currentPage >= this.pages.length - 1) return;
        this.currentPage++;
        // this.changePage();
      },
      changePage(num) {

        if (num < 0 || num > this.pages.length - 1) {

          return;
        }
        this.currentPage = num;
      },
      doStroke(canvasWidth, canvasHeight) {
        /** 渲染画板 **/
        let strokes = Utils.handleAnswerData(this.InitStrokeData ? this.InitStrokeData : this.strokeData);
        /***  页码  */
        let pagesInfo = [];
        let randomStr = uuid().toString();
        if (this.pages === undefined) return;
        // console.log(this.pages, '123123131');
        for (let page of this.pages) {
          pagesInfo.push({id: `${page}-${randomStr}`, page});
        }
        this.pagesInfo = pagesInfo;
        this.$nextTick(res => {

          let lastIdx = -1;
          for (let i = 0; i < pagesInfo.length; i++) {

            let pageInfo, dots;
            try {
              pageInfo = pagesInfo[i];
              dots = strokes[pageInfo.page];
            } catch (e) {
              return;
            }
            let cav = document.getElementById(this.comIndex + pageInfo.id).getContext('2d');
            if (!dots) {

              continue;
            }
            let top = 0,
              right = 0,
              left = canvasWidth,
              bottom = canvasHeight,
              flash = 1;
            for (let j in dots) {
              let timeDots = dots[j];
              for (let k = 0; k < timeDots.length; k++) {
                let dot = timeDots[k];
                let {x, y} = {x: dot.x, y: dot.y};
                if (y > top) top = y;
                if (y < bottom) bottom = y;
                if (x > right) right = x;
                if (x < left) left = x;
              }
            }
            let width = -left + right,
              height = top - bottom;
            flash = width / (canvasWidth * 0.9) > height / (canvasHeight * 0.9) ? width / (canvasWidth * 0.9) : height / (canvasHeight * 0.9);
            flash = flash > 0.11 && flash || 0.11;
            // console.log(flash);
            cav.canvas.width = width / flash + 20;
            cav.canvas.height = height / flash + 20;

            for (let j in dots) {
              let timeDots = dots[j];
              for (let k = 0; k < timeDots.length; k++) {

                let dot = timeDots[k];
                let {x, y} = {x: dot.x, y: dot.y};
                if (dot.idx != lastIdx) {
                  cav.moveTo((x - left) / flash + 10, (y - bottom) / flash + 10);
                  lastIdx = dot.idx;
                } else {

                  cav.lineTo((x - left) / flash + 10, (y - bottom) / flash + 10);
                }
              }
            }
            cav.stroke();
            cav.closePath();
          }
        });
      }
    },
    created() {

      this.doStroke(this.width, this.height);
    },
    props: {

      strokeData: {},
      pages: {
        type: Array,
        default: function() {
          return [];
        }
      },
      width: {
        default: 200
      },
      height: {
        default: 200
      },
      imgs: {
        type: Array,
        default: function() {
          return [];
        }
      },
      subImgs: {
        type: Array,
        default: function() {
          return [];
        }
      },
      comIndex: {
        default: 0
      },
      student: {
        type: Object,
        default: function() {
          return {};
        }
      },
      isBig: {
        type: Boolean,
        default: function() {
          return false;
        }
      }
    }
  };
</script>
